<template>
<div >
        <el-breadcrumb separator-class="el-icon-arrow-left" style="float:right">

    <el-breadcrumb-item :to="{ path: '/' }">一级分类管理</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>

    <el-breadcrumb-item>配送中心</el-breadcrumb-item>
  </el-breadcrumb>
    <el-input class="input" style="width:150px;margin-left:10px" placeholder="一级分类名称" v-model="firstName" clearable></el-input>
    <el-button @click="addfirst()" class="btn1" type="primary" icon="el-icon-plus" plain>添加一级分类</el-button>
    <br>

    <el-input class="input" style="width:150px;margin-left:10px;margin-top:10px;" placeholder="一级分类id" v-model="firstId" clearable @clear="getFirst"></el-input>
    <el-input class="input" style="width:150px;margin-left:10px;margin-top:10px;" placeholder="二级分类名称" v-model="secondName" clearable @clear="getFirst"></el-input>
    <el-button @click="addsecond()" class="btn1" type="primary" icon="el-icon-plus" plain>添加二级分类</el-button>
    <el-table
    v-loading="loading"
    ref="filterTable"
     :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    :data="firstClass"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
   <el-table-column type="index"></el-table-column>    
   <el-table-column
      prop="id"
      label="一级分类id"
      sortable
      style="width: 25%"
      column-key="id"
      :show-overflow-tooltip="true"
      :filters="[{text: '01', value: '01'}, {text: '02', value: '02'}, {text: '03', value:'03'}, {text: '04', value: '04'}, {text: '04', value: '04'}, {text: '04', value: '04'}, {text: '05', value: '05'}, {text: '06', value: '06'}]"
    >
    </el-table-column>
    <el-table-column
      prop="commodityNum"
      label="一级分类商品数量"
      :show-overflow-tooltip="true"
      style="width: 22%">
    </el-table-column>
    <el-table-column
      prop="firstName"
      :show-overflow-tooltip="true"
      label="一级分类名称"
      style="width: 22%">
    </el-table-column>
    <el-table-column
      prop="secondClassificationNum"
      :show-overflow-tooltip="true"
      label="一级分类下的二级分类数量"
      style="width: 30%">
    </el-table-column>
    
    <el-table-column label="操作" style="width: 25%">
      <template slot-scope="scope">
         <el-tooltip effect="dark" content="查看" placement="top" :enterable="false">
            <el-button icon="el-icon-edit" type="primary" size="mini" @click="lookover(scope.row)" style="padding:10px;">查看</el-button>
         </el-tooltip>
          <!-- <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
        <el-button icon="el-icon-edit" type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        </el-tooltip> -->
        <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
          <el-button
          disabled
          icon="el-icon-edit"
          size="mini"
          type="danger"
          style="padding:10px;"
          @click="handleDelete(scope.row)">删除</el-button>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>

 

  <!-- 查看按钮内容 -->
   <el-dialog style="width:1200px;text-align:center;" title="查看二级分类" :visible.sync="dialogFormVisible">
  <!-- <el-form :model="secondClassificationsList">
    <el-form-item label="创建时间" :label-width="formLabelWidth">
      <el-input class="el-input" v-model="secondClassificationsList.createTime" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="一级分类id" :label-width="formLabelWidth">
      <el-input class="el-input" v-model="secondClassificationsList.firstId" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="二级分类id" :label-width="formLabelWidth">
      <el-input class="el-input" v-model="secondClassificationsList.id" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="二级分类名称" :label-width="formLabelWidth">
      <el-input class="el-input" v-model="secondClassificationsList.secondName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="更新时间" :label-width="formLabelWidth">
      <el-input class="el-input" v-model="secondClassificationsList.updateTime" autocomplete="off"></el-input>
    </el-form-item>
  </el-form> -->
   <el-table
    ref="filterTable"
    :data="secondClassificationsList"
    style="width: 100%">
  <el-table-column
      prop="createTime"
      label="创建时间"
      width="100">
    </el-table-column>
    <el-table-column
      prop="firstId"
      label="一级分类id"
      width="120">
    </el-table-column>
    <el-table-column
      prop="id"
      label="二级分类id"
      width="120">
    </el-table-column>
    <el-table-column
      prop="secondName"
      label="二级分类名称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="updateTime"
      label="更新时间"
      width="100">
    </el-table-column>
  </el-table>
  <div slot="footer" class="dialog-footer">
    <el-button class="btn2" style="padding:10px;margin-left:-100px;" @click="dialogFormVisible = false">取 消</el-button>
    <el-button class="btn2" style="padding:10px;" type="primary" @click="dialogFormVisible = false;">确 定</el-button>
  </div>
</el-dialog>

  <!-- <el-input
  placeholder="输入关键字进行过滤"
  v-model="filterText">
</el-input>

<el-tree
  class="filter-tree"
  :data="data"
  :props="defaultProps"
  default-expand-all
  :filter-node-method="filterNode"
  ref="tree">
</el-tree> -->
<div class="block">
    <el-pagination
      @size-change="handleSizeChange"   
      @current-change="handleCurrentChange" 
      :current-page="pageNum" 
      :page-sizes="[10, 15]"
      :page-size="pageSize" 
      layout="total, sizes, prev, pager, next, jumper" 
      :total="total"> 
</el-pagination>
</div>
</div>
</template>

<script>
export default {
   
  data(){
    return{
      sort:true,
      pageSize:10,
      pageNum:1,
      dialogFormVisible:false,
      loading:true,
      firstClass:[],
      aa:[],
      bb:[],
      secondClassificationsList:[],
      firstName:'',
      queryInfo:{
        firstName:'',
        pageSize:10,
        pageNum:1,
        sort:'true'
      },
      total:0,
      firstId:'',
      secondName:''
    }
  },
  methods:{
    // 添加一级分类
     async addfirst() {
       if(this.firstName == ""){
         return this.$message.error("请输入一级分类")
       }else{
         const {data:res} = await this.$http.get('/api/send/addFirstClassification',{
        params:{
          'firstName': this.firstName
        }
      })
      
      if(res.code == 200){
        console.log("添加一级分类")
        console.log(res)
        this.getFirst()
        this.$message({
          message: '恭喜你，成功添加以及分类',
          type: 'success'
        })
        this.firstClass.push({
        firstName:this.firstName
      })
      }else{
        return this.$message.error(res.msg)
      }
       }
      

    },
    // 得到分页
     async getFirst () {
       this.loading = true;
        const {data:res} = await this.$http.get('/api/send/getFirstClassification?pageNum='+this.pageNum+'&pageSize='+this.pageSize+'&sort='+this.sort)
          console.log("成功")
          console.log(res)
          console.log("成功1")
          this.total = res.total
          let firstClass = res.data
          // for(var i=0;i<res.data.length;i++){
          //  this.secondClassificationsList.push(res.data[i].secondClassificationsList)
          // }
          // console.log(firstClass)
          // console.log("成功2")
          // console.log(this.secondClassificationsList)
          this.firstClass = firstClass
          // this.secondClassificationsList = secondClassificationsList
          this.loading = false
  },
  // 添加二级分类
  async addsecond() {
    if(this.firstId == "" || this.secondName == ""){
      return this.$message.error("添加条件不能为空")
    }else{
      this.loading = true
      const {data:res} = await this.$http.get('/api/send/addSecondClassification',{
        params:{
           'firstId':this.firstId,
           'secondName':this.secondName
        }
      })
      if(res.code == 200) {
        this.secondClassificationsList.push({
          secondName:this.secondName
        })
        this.$message({
          message: '恭喜你，成功添加二级分类',
          type: 'success'
        })
        this.getFirst()
      }else{
        return this.$message.error(res.msg)
      }
    }
  },
  // 查看按钮查看二级分类
   lookover(row) {
    //  row.secondClassificationsList
    this.getFirst()
    this.dialogFormVisible = true;
    console.log(row.secondClassificationsList)
    // for(var i=0;i<row.secondClassificationsList.length;i++){
      this.secondClassificationsList = row.secondClassificationsList
    // }
    // console.log("你好")
    // console.log(this.secondClassificationsList[0])
    
  },
  handleSizeChange(newSize) {
        this.pageSize = newSize
        this.getFirst()
        
      },
      /* 页面数发送改变的时候 */
      handleCurrentChange(newPage) {
        this.pageNum = newPage
        this.getFirst()
      
      },
  },
  created(){
    this.getFirst()
  }
};
</script>

<style scoped>
/* .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  } */
*{
  margin:0 auto;
  padding: 0px;
}
.btn1{
  width: 140px;
  height: 40px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 10px;
  background-color: rgb(24, 144, 255);
  color: whitesmoke;
}
</style>